<template>
    <div id="container"></div>
</template>

<script setup>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import { shallowRef } from 'vue'
    import {onMounted,ref, reactive,defineProps,watch} from "vue";
    import state from "../store";
    import store from "../store";
    //使用let
    let map = shallowRef(null);

    //父组件传来的位置信息
    const locations=defineProps(['locations'])

    //初始化地图
    const initMap=async ()=> {
        await AMapLoader.load({
            key: "0660b1d1e3b8275101d54732f4607219",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Geolocation','AMap.Geocoder'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            //组合式api不能使用this
            map = new AMap.Map("container", {  //设置地图容器id
                viewMode: "3D",    //是否为3D地图模式
                zoom: 5,           //初始化地图级别
                center: [105.602725, 37.076636], //初始化地图中心点位置
                resizeEnable: true,
            });

            //定位功能
            AMap.plugin('AMap.Geolocation', function() {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                    timeout: 10000, // 设置定位超时时间，默认：无穷大
                    offset: [10, 20],  // 定位按钮的停靠位置的偏移量
                    zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    position: 'RB' //  定位按钮的排放位置,  RB表示右下
                })
                geolocation.getCurrentPosition(function(status,result){
                    if(status=='complete'){
                        onComplete(result)
                    }else{
                        onError(result)
                    }
                });
                function onComplete (data) {
                    // data是具体的定位信息，返回给主页定位
                    let location=[]
                    // 定位的经纬度
                    location.push(data.position.lng)
                    location.push(data.position.lat)
                    console.log(location)
                    state.commit("saveLocation",location)
                    console.log(store.getters.getLocation)
                    //****//
                }
                function onError (data) {
                    // 定位出错
                    //alert(JSON.stringify(data));
                    //document.getElementById('tip').innerHTML = '定位失败';
                }
            })
        }).catch(e => {
            console.log(e);
        })
    }
    onMounted(async ()=>{
        await initMap();
        //computedDistance()
    })

    //监听地址的变化，动态更改地图的显示
    watch(locations,(newValue,oldValue)=>{
        //设置为数组
        let position=newValue.locations.split(',')
        //根据坐标设置地图的中心点
        map.setCenter(position);
        //调整地图的级别
        map.setZoom(12)

    })


</script>

<style scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 400px;
        height: 400px;
    }
</style>